import React, { useEffect, useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {Card, Table, DatePicker, Row, Col, Input, Button, Select, message, Divider, Popconfirm} from 'antd'
import {deleteBlackList,queryBlackList} from "@/services/rent";
import moment from "moment/moment";
import { exportRent } from '@/services/login'
const { RangePicker } = DatePicker

const Count = () => {
  const [total, setTotal] = useState(0)
  const [pageInfo, setPageInfo] = useState({
    pageNumber: 1,
    pageSize: 10,
    realName:'',//姓名
    phoneNo:'',//手机号
      })
  const [list, setList] = useState([])
  const [realName, setName] = useState('')//姓名
  const [phoneNo, setPhoneNo] = useState('')//手机号
  const styles = {
    spanWidthStyles: {
      width: '70px',
      'text-align-last': 'justify',
      display: 'inline-block'
    },
    formItemStyles: {
      width: '200px'
    }
  }

  const onChangeTime = (date, dateString) => {
    const [createTimeStart, createTimeEnd] = dateString
    if (!createTimeStart) {
      setPageInfo({
        ...pageInfo,
      })
      setOrderTime(null)
    } else {
      // setPageInfo({
      //   ...pageInfo,
      //   createTimeStart,
      //   createTimeEnd
      // })
      setOrderTime([moment(createTimeStart), moment(createTimeEnd)])
    }
  }
 const handleOverDueChange = overDue =>{
   setOverDue(overDue)
  }
  const loadList = async () => {
    queryBlackList(pageInfo).then(res => {
      setList(res.data.records)
      setTotal(res.data.total)
    })
  }

  useEffect(() => {
    loadList()
  }, [pageInfo])
  const confirm = async id => {
    try {
      await deleteBlackList({id:id})
      message.success('删除成功')
      loadList()
    } catch (error) {
      message.warn(error.message)
    }
  }
  const cancel = () => {
    message.warn('您取消了删除动作')
  }
  const columns = [

    {
      title: '姓名',
      dataIndex: 'realName',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'phoneNo',
      align: 'center'
    },
    {
      title: '身份证',
      dataIndex: 'idCardNo',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'name4',
      align: 'center',
      render: (text, record) => (
        <span>
          <Popconfirm
            title="您确定要删除该黑名单吗？"
            cancelText="取消"
            okText="确定"
            onConfirm={() => confirm(record.id)}
            onCancel={cancel}
          >
            <Button type="link" size="small">
              删除
            </Button>
          </Popconfirm>
        </span>
      )
    }
  ]

  const PaginationOptions = {
    current: pageInfo.pageNumber,
    pageSize: pageInfo.pageSize,
    total,
    showTotal: total => {
      return `共${total}条`
    },
    onChange: pageNumber => {
      setPageInfo({ ...pageInfo, pageNumber })
    }
  }
  const handleChange = channelCode => {
    // setPageInfo({
    //   ...pageInfo,
    //   pageNumber: 1,
    //   channelCode
    // })
    setChannelCode(channelCode)
  }
  //查询
  const onSearchBtn = () => {
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      realName,//姓名
      phoneNo,//手机号
    })
  }
  const onReset =() =>{
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      realName:'',//姓名
      phoneNo:"",//手机号

    })
    setName('')
    setPhoneNo('')
  }
 const exportRent1 = () =>{
   exportRent({ ...pageInfo, pageNumber: -1, pageSize: -1,
     realName,//姓名
     phoneNo,//手机号
   }).then(res => {
     const objectURL = URL.createObjectURL(res)
     const btn = document.createElement('a')
     const body = document.querySelector('body')
     if (body) {
       body.appendChild(btn)
     }
     btn.download = `黑名单列表.xlsx`
     btn.href = objectURL
     btn.click()
     if (body) {
       body.removeChild(btn) // 删除标签
     }

     message.success('导出成功')
   })
 }
  return (
    <>
      <PageHeaderWrapper title="黑名单列表">
         <Card style={{ marginBottom: 20 }}>
          <Row gutter={[5, 20]}>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>会员姓名：</span>
                <Input style={styles.formItemStyles} placeholder="请输入姓名"
                       value={realName}
                       onChange={e => setName(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>手机号：</span>
                <Input style={styles.formItemStyles} placeholder="请输入手机号"
                       value={phoneNo}
                       onChange={e => setPhoneNo(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            <Col span={6} offset={6}>
              <Button type="primary" onClick={onSearchBtn}>查询</Button>
              <Button type="default" onClick={onReset}>重置</Button>
              <Button type="danger" onClick={exportRent1} style={{display:"none"}}>导出</Button>
            </Col>
          </Row>
        </Card>
        <Card>
          <Table
            rowKey="orderNo"
            dataSource={list}
            columns={columns}
            pagination={PaginationOptions}
          />
        </Card>
      </PageHeaderWrapper>
    </>
  )
}

export default Count
